<template>
  <el-empty v-if="showEmpty && (!items || items.length === 0)" description="暂无数据" />

  <GridImages v-else v-bind="$attrs" :items="views">
    <template v-if="overflow.length > 0" #more>
      <el-popover placement="bottom" trigger="hover" :width="400px">
        <template #reference>
          <a :style="{ padding: '0 12px' }"> 查看全部 ({{ overflow.length }}) </a>
        </template>
        <GridImages v-bind="slotProps" :items="overflow" :max="0" />
      </el-popover>
    </template>
  </GridImages>
</template>

<script setup>
import { computed } from 'vue';
import { ElEmpty, ElPopover } from 'element-plus';
import GridImages from './grid-images.vue';

const { max, items } = defineProps({
  max: {
    type: Number,
    default: -1,
  },
  items: {
    type: Array,
    default: () => [],
  },
  showEmpty: Boolean,
});

// 分割显示项
const [views, overflow] = computed(() => {
  if (!(max > -1)) return [items, []];
  const views = [...items];
  const overflow = views.splice(max);
  return [views, overflow];
});
</script>
